<!-- 羊只体重列表 -->
<template>
    <el-row style="margin-top: 30px;">
        <el-col :span="7" style="margin-left: 25px;">
          称重日期:<el-date-picker
        v-model="form.start"
        type="daterange"
        range-separator="-"
        start-placeholder="Start date"
        end-placeholder="End date"
        style="width: 200px;"
      />
        </el-col>
        <el-col :span="6" style="margin-left: -50px;">
          <el-form-item label="羊只耳号:" >
        <el-select  placeholder="请选择羊只耳号" style="width: 200px">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
        </el-col>
        <el-col :span="7" >
          <el-form-item label="称重类型:" >
        <el-select  placeholder="请选择称重类型" style="width: 200px">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
        </el-col>
        <el-col :span="3">
             <el-button type="danger">查询</el-button>
             <el-button >重置</el-button>
        </el-col>
    </el-row>
    <el-row style="margin-top: 1px;">
        <el-col :span="7" style="margin-left: 54px;" >
          品种:<el-select
            v-model="form.varietyId"
            placeholder="请选择品种"
            style="width: 200px">
            <el-option
              v-for="item in varietyData"
              :key="item.varietyId"
              :label="item.varietyName"
              :value="item.varietyId"
            /> </el-select>
        </el-col>
        <el-col :span="6" style="margin-left: -50px;">
          <el-form-item label="性别:" >
        <el-select  style="width: 200px">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
        </el-col>
        <el-col :span="7" style="margin-left: -27px">
          称重月龄: <el-input v-model="input" style="width: 100px;margin-left: 5px;"></el-input>-<el-input v-model="input" style="width: 100px;"></el-input>
        </el-col>
    </el-row>
    <div style="background-color: gainsboro;height: 5px;"></div>
    <div style="margin-top: 5px;">
        <el-button type="danger" style="float: left;;margin-left: 10px;">+ 新增</el-button>&emsp;
        <el-button type="danger" :icon="Delete" style="float: left;;margin-left: 10px;">删除</el-button>
    </div>
    <br />
    <h2 style="background-color:mistyrose;font-size: 15px;border: 1px solid red;">&emsp;已选择 {{ form1.num }} 项</h2>
    <div style="background-color: gainsboro;height: 5px;margin-top: 5px;"></div>
    <el-table :data="tableData"   border style="width: 100%;margin-top: 5px;border-top: 3px solid red;" @selection-change="handleSelectionChange">
        <el-table-column type="selection" />
        <el-table-column prop="sleepWeightId"  label="序号" >
          <template  #default="{$index}">
          {{ $index+1 }}
        </template>
        </el-table-column>
        <el-table-column prop="weightDate" label="称重日期" width="100px" >
          <template #default="scope">
              {{ scope.row.weightDate.substring(0,10) }}
          </template>
        </el-table-column>
        <el-table-column prop="earNumber" label="耳号" width="100px" />
        <el-table-column prop="varietyName" label="品种" />
        <el-table-column prop="gender" label="性别" >
          <template #default="scope">
             <span v-if="scope.row.gender==1">男</span>
             <span v-else>女</span>
          </template>
        </el-table-column>
        <el-table-column prop="weightTypeName" label="称重类型" />
        <el-table-column prop="weight" label="重量(公斤)" />
        <el-table-column prop="monthAge" label="称重月龄" />
        <el-table-column prop="createId" label="创建人" >
          <template #default="scope">
              <span v-if="scope.row.createId==1">罗Sir</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="100px" >
          <template #default="scope">
              {{ scope.row.createTime.substring(0,10) }}
          </template>
        </el-table-column>
        <el-table-column prop="updateId" label="修改人" />
        <el-table-column prop="updateTime" label="修改时间" />
        <el-table-column fixed="right" prop="name" label="操作" />
    </el-table>
  

      
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useCounterStore } from '@/stores/counter';
const counterStore = useCounterStore();
const route = useRoute();
const router = useRouter();

const form=reactive({
  start:'',
  varietyId:''
})
const tableData=ref([])
const getData=()=>{
  axios.get('http://localhost:5039/api/SleepWeight/GetSleepWeight').then(res=>{
    console.log(res)
    tableData.value=res.data.data
  })
}
const form1=reactive({
  num:0
})
const handleSelectionChange=(val:any)=>{
  console.log(val)
  form1.num=val.length
}
//品种
const varietyData:any=ref([])
const getvarietyData=()=>{
  axios.get('http://localhost:5039/api/SleepBegin/SearchVariety').then(res=>{
    console.log('品种',res)
    varietyData.value=res.data.data
  })
}


onMounted(()=>{
  getData()
  getvarietyData()
})
</script>